<template>
  <div class="data-card">
    <div class="online"></div>
    <div class="left-tip">
      <div class="block-icon">
        <div></div>
        <div></div>
      </div>
      <div class="block-text">
        <div>延期</div>
        <div>8</div>
      </div>
    </div>
    <div class="right-tip">
      <div class="block-icon">
        <div></div>
        <div></div>
      </div>
      <div class="block-text">
        <div>正常</div>
        <div>12</div>
      </div>
    </div>
    <div class="total">
      <div>20</div>
      <div>项目总数</div>
    </div>
    <div class="pie-dom" ref="pie-dom"></div>
  </div>
</template>

<script>
//在网项目统计
import echarts from "echarts";
export default {
  data() {
    return {
      pieInstance: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.drawPieChar();
    });
  },
  methods: {
    drawPieChar() {
      let chart_dom = this.$refs["pie-dom"];
      this.pieInstance = echarts.init(chart_dom);
      const chartData = [
        { name: "正常", value: 12 },
        { name: "延期", value: 8 },
      ];
      let color = ["#67D5B5", "#EE7785"];
      let baseOpt = {
        color,
        tooltip: {
          show: false,
        },
        legend: {
          show: false,
        },
        hover: {
          enabled: false, // 禁用鼠标移入高亮效果
        },
        series: [
          {
            silent: true,
            name: "",
            type: "pie",
            radius: ["47%", "61%"],
            center: ["50%", "50%"],
            hoverAnimation: false,
            avoidLabelOverlap: false,
            itemStyle: {
              borderWidth: 0,
            },
            label: {
              show: false,
              position: "center",
            },
            labelLine: {
              show: false,
            },
            data: chartData,
            minAngle: 1,
          },
          {
            silent: true,
            name: "",
            type: "pie",
            radius: ["47%", "35%"],
            center: ["50%", "50%"],
            hoverAnimation: false,
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            labelLine: {
              show: false,
            },
            data: chartData,
            itemStyle: {
              borderWidth: 0,
              normal: {
                color: (data) => color[data.dataIndex] + "1D",
                borderColor: "#fff",
                borderWidth: 1,
              },
            },
            minAngle: 1,
          },
        ],
      };
      this.pieInstance.setOption(baseOpt);
      //开启响应式
      window.addEventListener("resize", () => {
        this.pieInstance.resize();
      });
    },
  },
  destroyed() {
    this.pieInstance && this.pieInstance.dispose();
  },
};
</script>

<style lang="less" scoped>
.data-card {
  height: 100%;
  width: 100%;
  position: relative;
  .online {
    width: 210px;
    height: 210px;
    background: rgba(217, 217, 217, 0);
    border-radius: 50%;
    border: 4px solid rgba(102, 165, 254, 0.3);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .block-text {
    display: flex;
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 1px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    :nth-child(1) {
      color: #666666;
      margin-right: 10px;
    }
    :nth-child(2) {
      color: #333333;
    }
  }
  .left-tip {
    position: absolute;
    top: 50%;
    left: 64px;
    transform: translateY(-50%);
    .block-icon {
      display: flex;
      margin-bottom: 10px;
      :nth-child(1) {
        width: 24px;
        height: 10px;
        background: #ee7785;
        margin-right: 10px;
      }
      :nth-child(2) {
        width: 48px;
        height: 10px;
        background: rgba(238, 119, 133, 0.2);
      }
    }
  }
  .right-tip {
    position: absolute;
    top: 50%;
    right: 64px;
    transform: translateY(-50%);
    .block-icon {
      display: flex;
      margin-bottom: 10px;
      :nth-child(1) {
        width: 24px;
        height: 10px;
        background: #67d5b5;
        margin-right: 10px;
      }
      :nth-child(2) {
        width: 48px;
        height: 10px;
        background: rgba(103, 213, 181, 0.2);
      }
    }
  }
  .total {
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: D-DIN, D-DIN;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    :nth-child(1) {
      color: #333333;
      font-size: 24px;
    }
  }
  .pie-dom {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
}
</style>
